<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      margin: 0;
    }

    .con {
      font-size: 14px;
      color: #666;
      width: 600px;
      margin: 50px auto;
      border-radius: 8px;
      padding: 15px;
      overflow: hidden;
      resize: horizontal;
      box-shadow: 20px 20px 60px #bebebe,
        -20px -20px 60px #ffffff;
    }

    .wrap {
      position: relative;
      line-height: 2;
      height: 2em;
      padding: 0 10px;
      overflow: hidden;
      background: #fff;
      margin: 5px 0;
    }

    .wrap:nth-child(odd) {
      background: #f5f5f5;
    }

    .title {
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      background-color: inherit;
      overflow: hidden;
      position: relative;
      top: -4em;
    }

    .txt {
      display: block;
      max-height: 4em;
    }
  </style>
</head>

<body>
  <ul class="con">
    <li class="wrap">
      <span class="txt">CSS 实现优惠券的技巧 - 2021-03-26</span>
      <span class="title" title="CSS 实现优惠券的技巧 - 2021-03-26">CSS 实现优惠券的技巧 - 2021-03-26</span>
    </li>
    <li class="wrap">
      <span class="txt">CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26</span>
      <span class="title" title="CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26">CSS
        测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26</span>
    </li>
    <li class="wrap">
      <span class="txt">CSS 拖拽?</span>
      <span class="title" title="CSS 拖拽?">CSS 拖拽?</span>
    </li>
    <li class="wrap">
      <span class="txt">CSS 文本超出自动显示title</span>
      <span class="title" title="CSS 文本超出自动显示title">CSS 文本超出自动显示title</span>
    </li>
  </ul>

  <script>
    // {
    //   function Person (name, age) {
    //     this.name = name;
    //     this.age = age;
    //   }
    //   function newObject () {
    //     // 定义空对象
    //     let obj = {};
    //     // 获取最前面的方法
    //     var Constructor = Array.prototype.shift.apply(arguments);
    //     // 让obj的原型指向构造函数的原型上
    //     obj.__proto__ = Constructor.prototype;
    //     // 执行  让方法上的this指向最开始创建的obj上
    //     let res = Constructor.apply(obj, arguments);
    //     // 如果本身有返回值的话,优先返回  返回值
    //     return typeof res == "object" ? res : obj;
    //   }

    //   let o1 = newObject(Person, "liming", 22);
    //   console.log(o1);
    // }
    // Function.prototype.myCall = function () {
    //   let context = arguments[0] || global;
    //   context.fn = this;
    //   var args = [];
    //   for (let i = 1; i < arguments.length; i++) {
    //     args.push(arguments[i]);
    //   }
    //   context.fn(...args);
    //   delete context.fn;
    // };

    // {
    //   Function.prototype.myApply = function () {
    //     // 获取第一个参数
    //     let context = arguments[0] || global;
    //     // 将this传递给context上
    //     context.fn = this;
    //     //
    //     let args = arguments.length > 1 ? arguments[1] : [];
    //     context.fn(...args);
    //     delete context.fn;
    //   };

    //   Function.prototype.myBind = function () {
    //     let context = arguments[0] || global;
    //     context.fn = this;
    //     let args = [];
    //     for (let i = 1; i < arguments.length; i++) {
    //       args.push(arguments[i]);
    //     }

    //     return function () {
    //       for (let i = 0; i < arguments.length; i++) {
    //         args.push(arguments[i]);
    //       }
    //       context.fn(...args);
    //       delete context.fn;
    //     };
    //   };

    //   function show (...args) {
    //     console.log(...args);
    //     console.log(this.name);
    //   }

    //   let obj = {
    //     name: "conghuhu",
    //   };

    //   show.myCall(obj, "1", "2");
    //   show.myApply(obj, ["3", "4"]);
    //   let bind = show.myBind(obj, "5", "6");
    //   bind("7");
    // }



    // let arr = "1,2,3"
    // let arr1 = arr.slice(0, 1)
    // console.log(arr, arr1);

    const arr = [
      {
        code: 1,
        title: "课程 1",
        children: [
          { code: 4, title: "课程 1-1" },
          {
            code: 5,
            title: "课程 1-2",
            children: [
              { code: 6, title: "课程 1-2-1" },
              { code: 7, title: "课程 1-2-2" },
            ],
          },
        ],
      },
      { code: 2, title: "课程 2" },
      { code: 3, title: "课程 3" },
    ];


    // function flaten (arr) {
    //   return arr.reduce((p, v, i) => {
    //     for (let i = 0; i < p.length; i++) {
    //       if (p[i].children) {
    //         delete p[i].children
    //       }
    //     }
    //     return p.concat(v.children ? flaten(v.children).concat(v) : v);
    //   }, [])
    // }
    // console.log(flaten(arr))


    function aaa (arr, codes = '') {
      arr.forEach((item, idx) => {
        item.codes = item.code
        if (item.children && item.children.length > 0) {
          item.children.forEach(item1 => {
            item1.codes = `${item.code}+${item1.code}`
            if (item1.children && item1.children.length > 0) {
              item1.children.forEach(item2 => {
                item2.codes = `${item.code}+${item1.code}+${item2.code}`
                if (item2.children && item2.children.length > 0) {
                  item2.children.forEach(item3 => {
                    item3.codes = `${item.code}+${item1.code}+${item2.code}+${item3.code}`
                  })
                }
              })
            }
          })
        }
      })
      return arr
    }


    function aaa (arr, codes = '') {
      arr.forEach((item, idx) => {
        // item.codes = item.code
        codes = codes ? `${codes}+${item.code}` : item.code
        item.codes = codes
        if (item.children) {
          aaa(item.children, codes)
        }
      })
      return arr
    }
    console.log(aaa(arr, ""));
  </script>
</body>

</html>